<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<map class="map_area" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
				 @regionchange='mapChange' id="map1" ref="map1">
					<cover-image src="/static/icon_position.png" class="icon-img"></cover-image>
				</map>
					
				<!-- <map class="map_area" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
					:markers="covers" :circles="circles"></map> -->
			</view>
			<!-- 下单维修-按钮 -->
			<view class="consult_immediately_btn" @tap="chooseLocation">下单维修</view>

		</view><!-- box -->
	</view>
</template>

<script>
	import { toast, showLoading, hideLoading } from '@/utils/toast.js';
	import { mainPageApi, getUserInfoApi } from '@/http/api.js';
	export default {
		data() {
			return {
				title: 'map',
				latitude: 31.894164,
				longitude: 117.342747,
				latitude_choose: 31.894164,
				longitude_choose: 117.342747,
			}
		},
		onShow(){
			this.getUserInfo();
		},
		onBackPress(options) {
		    uni.redirectTo({
		    	url: '/pages/index/index'
		    })
			return true;
		},
		onLoad() {
			if (!uni.getStorageSync('userId')) {
				uni.navigateBack({
					delta: 1
				})
			}
			// const subNVue = uni.getSubNVueById('concat');
			// subNVue.show('slide-in-left', 200, () => {
			// 	console.log('subNVue 原生子窗体显示成功');

			// });
			// const subNVueTips = uni.getSubNVueById('tips');
			// subNVueTips.show('slide-in-left', 200, () => {
			// 	console.log('subNVueTips 原生子窗体显示成功');

			// });
			let that = this;
			uni.getLocation({
			    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			    success: function (res) {
			        that.latitude = res.latitude;
			        that.longitude = res.longitude;
			       
			    },
				fail: function (err) {
					toast('定位获取失败');
					setTimeout(function(){
						uni.redirectTo({
							url: '/pages/index/index'
						})
					},1500)
				}
			});
		},
		onReady() {
			this.mapContext = uni.createMapContext("map1", this);  
		},
		methods: {
			getUserInfo() {
				let that = this;
				getUserInfoApi({
					userId: uni.getStorageSync('userId')
				}).then(res => {
					if (!res.data.beCompleteInfo) {
						uni.navigateTo({
							url: '/pages/personal_information/personal_information'
						})
					}
				}).catch(err => {
				})
			},
			
			
			mapChange(e) {
				console.log(e);
				this.latitude_choose = e.detail.centerLocation.latitude;
				this.longitude_choose = e.detail.centerLocation.longitude;
				console.log(e.detail.centerLocation.latitude, '纬度');
				console.log(e.detail.centerLocation.longitude, '经度');
			},
				
			

			chooseLocation() {
				let longitude = '';
				let latitude = '';
				let that = this;
				this.mapContext.getCenterLocation({
					success: (res) => {  
						longitude = res.longitude;
						latitude = res.latitude;
						let url = '/pages/fault_information/fault_information?latitude=' + latitude + '&longitude=' + longitude;
						try {
						    uni.setStorageSync('latitude', latitude);
							uni.setStorageSync('longitude', longitude);
							toast('位置选择成功！');
							setTimeout(function(){
								uni.redirectTo({
									url: url
								})
							}, 1500)
						} catch (e) {
						    toast('位置选择失败');
						}
					}  
				})
				
				
				
			}
			
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f5f5f5;
	}

	.map_area {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}
	
	
	.icon-img{width: 36px;height: 36px;display: block;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);margin-top: -70px;}
	
</style>
